@inherits MasaComponentBase

<SSheetDialog EnableDomReload @bind-Value="Value" Title="@T("Release history")" Icon="mdi-circle" IconColor="success">
    <div class="d-flex flex-column" style="width:100%; height:100%; padding: 48px 228px">
        <div>
            <div class="emphasis--text h6 d-flex align-center">
                @_releaseHistory.Name
                <span class="ml-3 regular3--text btn">|</span>
                <sapn class="ml-2 regular3--text btn">@_releaseHistory.FormatLabelCode</sapn>
            </div>
        </div>
        <div class="d-flex full-height full-width mt-12" style="overflow: hidden;">
            <div class="full-height" style="min-width: 290px; width: 290px; margin-left: -85px; border-right: 1px solid #E2E7F4; overflow-x: hidden; overflow-y: auto;">
                <MTimeline>
                    @{
                        int _index = 0;
                        foreach (var release in _configObjectReleases)
                        {
                            int index = _index;
                            _index++;
                            <MTimelineItem Class="d-flex align-start" Style="padding-bottom:16px;" HideDot="!release.IsActive" Small FillDot Right @onclick="()=>OnTimelineItemClickAsync(release)">
                                <IconContent>
                                    <SIcon Size="20" Color="primary">mdi-circle</SIcon>
                                </IconContent>
                                <OppositeContent>
                                    <div>
                                        <div style="@(release.IsActive ? "font-size:14px; font-weight: 600; color: #1B2559;" : "font-size:12px; font-weight: 500; color: #485585;")">
                                            <DateTimeZone Value="release.CreationTime" Format=@(d=>d.ToString("MM-dd").TrimStart('0')) />
                                        </div>
                                        @if (index == 0)
                                        {
                                            <div style="font-size:10px; font-weight: 400; color: #A3AED0;">@T("Current")</div>
                                        }
                                        else if (release.IsInvalid)
                                        {
                                            <div style="font-size:10px; font-weight: 400; color: #A3AED0;">@T("Rollbacked")</div>
                                        }
                                    </div>
                                </OppositeContent>
                                <ChildContent>
                                    <div class="text-overflow2" style="@(release.IsActive ? "font-size:14px; font-weight: 600; color: #1B2559; width: 80px;" : "font-size:12px; font-weight: 500; color: #485585; width: 80px;")">
                                        @release.Name
                                    </div>
                                </ChildContent>
                            </MTimelineItem>
                        }
                    }
                </MTimeline>
            </div>
            <div class="ml-12 content full-height full-width pr-1" style="overflow-y: auto;">
                <div class="full-width d-flex align-center pl-2 pr-3" style="height: 40px; background: #F0F3FA; border-radius: 8px;">
                    @if (_selectReleaseHistory.IsInvalid)
                    {
                        <MChip Class="mr-4" Small Label Color="#323D6F" TextColor="white">@T("Rollbacked")</MChip>
                    }
                    <div class="text-overflow" style="color: #485585; font-weight: 700; font-size: 16px; width:700px;">
                        @_selectReleaseHistory.Name
                    </div>
                    <MSpacer></MSpacer>
                    <span style="color: #A3AED0; font-size:12px;">@T("Release time")：<DateTimeZone Value="@_selectReleaseHistory.CreationTime" /></span>
                    <span class="mx-2" style="color: #E4E8F3;">|</span>
                    <span style="color: #323D6F; font-size:12px;">@_selectReleaseHistory.CreatorName</span>
                </div>
                <div class="mt-6">
                    @if (!string.IsNullOrWhiteSpace(_selectReleaseHistory.Comment))
                    {
                        <span style="color: #323D6F; font-size: 14px;">
                            @T("Description")：
                        </span>
                    }
                    <span style="color: #7681AB; font-size: 14px; word-break: break-all;">@_selectReleaseHistory.Comment</span>
                </div>
                @if (_releaseHistory.FormatLabelCode.Trim().ToLower() == "properties")
                {
                    <SElevationTab Class="mt-12"
                                   Left
                                   Tab="@T(_releaseTabText)"
                                   TabChanged="ReleaseHistoryTabIndexChanged"
                                   ItemsClass="rounded-2"
                                   Dense
                                   TabMinWidth="160"
                                   Tabs="@(new List<string>{ @T("All configuration"), @T("Changed configuration")})">
                        <SElevationTabItem>
                            <div style="border:1px solid #E2E7F4;" class="py-1 mt-4 rounded-2">
                                <MDataTable Headers="_allConfigheaders"
                                            DisableSort
                                            TItem="ConfigObjectPropertyModel"
                                            Items="@_selectReleaseHistory.ConfigObjectProperties"
                                            Class="table-border-none table-release"
                                            HideDefaultFooter>
                                    <HeaderColContent Context="header">
                                        <span class="regular3--text btn">@header.Text</span>
                                    </HeaderColContent>
                                </MDataTable>
                            </div>
                        </SElevationTabItem>
                        <SElevationTabItem>
                            <div style="border:1px solid #E2E7F4;" class="py-1 mt-4 rounded-2">
                                <MDataTable Headers="ChangedConfigheaders"
                                            DisableSort
                                            TItem="ConfigObjectPropertyModel"
                                            Items="@_changedProperties"
                                            Class="table-border-none table-release"
                                            HideDefaultFooter>
                                    <HeaderColContent Context="header">
                                        <span class="regular3--text btn">@header.Text</span>
                                    </HeaderColContent>
                                    <ItemColContent>
                                        @switch (@context.Header.Value)
                                        {
                                            case nameof(ConfigObjectPropertyModel.IsPublished):
                                                if (context.Item.IsAdded)
                                                {
                                                    <SIcon Class="mr-1" Color="#7681AB" Style="margin-bottom:2px;" Size="16">mdi-plus</SIcon>
                                                }
                                                else if (context.Item.IsEdited)
                                                {
                                                    <SIcon Class="mr-1" Color="#7681AB" Style="margin-bottom:2px;" Size="16">mdi-pencil</SIcon>
                                                }
                                                else if (context.Item.IsDeleted)
                                                {
                                                    <SIcon Class="mr-1" Color="#7681AB" Style="margin-bottom:2px;" Size="16">mdi-delete</SIcon>
                                                }
                                                break;
                                            default:
                                                @context.Value
                                                break;
                                        }
                                    </ItemColContent>
                                </MDataTable>
                            </div>
                        </SElevationTabItem>
                    </SElevationTab>
                }
                else
                {
                    <div class="mt-12" style="color: #1B2559; font-weight: 700; font-size: 14px;">@T("All configuration")</div>
                    <div class="py-3">
                        <MTextarea HideDetails="true" Outlined Readonly Value="@_selectReleaseHistory.Content"></MTextarea>
                    </div>
                }
            </div>
        </div>
        <div class="d-flex justify-end align-end" style="width:100%;">
            <SButton Small Class="mt-6" Color="primary" OnClick="RollbackToAsync">@T("Rollback to this version")</SButton>
        </div>
    </div>
</SSheetDialog>

<RollbackModal ModalKey="@($"releaseHistoryRollbackModal{_showRollbackModal}")"
               @bind-Value="_showRollbackModal"
               FormatLabelCode="@_formatLabelCode"
               CurrentConfigObjectRelease="_currentConfigObjectRelease"
               RollbackConfigObjectRelease="_rollbackConfigObjectRelease"
               OnClick="async ()=>{ await RollbackAsync(_releaseHistory); }"
               OnClickAfter="_handleRollbackOnClickAfter" />